<template>
  <BoTable
    :columns="_columns"
    :request="_request"
    :rowSelection="rowSelection"
    ref="tableRef"
    row-key="id"
    :show-index="true"
  >
    <template #toolbars>
      <Space :size="8">
        <Button type="primary" @click="onAdd"> 新增 </Button>
        <Button :disabled="!selectKeys?.length" @click="onDelete()"
          >删除</Button
        >
      </Space>
    </template>

    <template #expandedRowRender="{ record }">
      <BoTable
        :columns="columns"
        :request="(params) => _listByEventId(params, record.eewId)"
        height="auto"
        hideSearch
        hidePagination
      ></BoTable>
    </template>
  </BoTable>
  <FormModal :columns="_items"></FormModal>
</template>

<script setup lang="tsx">
import { computed, ref } from 'vue';
import { useFormModal } from '@boeyo/hooks';
import { BoFormProps, BoTable, BoTableProps } from '@boeyo/ui';
import { Button, Modal, Space, message } from 'ant-design-vue';

const tableRef = ref();
const { FormModal, open } = useFormModal({
  size: 'middle',
  column: 1,
});

const selectKeys = ref<any[]>([]);
const rowSelection = computed<BoTableProps['rowSelection']>(() => {
  return {
    onChange(values) {
      selectKeys.value = values;
    },
  };
});
const columns = computed<BoTableProps['columns']>(() => [
  {
    title: 'ID',
    dataIndex: 'ruleName',
  },
  {
    title: '执行主机',
    dataIndex: 'ruleName',
  },
  {
    title: '退出码',
    dataIndex: 'ruleName',
  },
  {
    title: '执行状态',
    dataIndex: 'ruleName',
  },
  {
    title: '错误信息',
    dataIndex: 'ruleName',
  },
  {
    title: '执行时间',
    dataIndex: 'ruleName',
  },
  {
    title: '操作',
    dataIndex: 'operation',
    hideInSearch: true,
    fixed: 'right',
    actions: [
      {
        text: '命令',
        onClick(record) {
          // onView(record);
        },
      },
      {
        text: '详情',
        onClick(record) {
          // onView(record);
        },
      },
    ],
  },
]);
const _columns = computed<BoTableProps['columns']>(() => [
  {
    title: '任务名称',
    dataIndex: 'ruleName',
  },
  {
    title: '执行命令',
    dataIndex: 'ruleName',
    hideInSearch: true,
  },
  {
    title: '执行用户',
    dataIndex: 'ruleName',
    hideInSearch: true,
  },
  {
    title: '执行状态',
    dataIndex: 'status',
    hideInSearch: true,
  },
  {
    title: '执行时间',
    dataIndex: 'status',
    hideInSearch: true,
  },
  {
    title: '操作',
    dataIndex: 'operation',
    hideInSearch: true,
    fixed: 'right',
    actions: [
      {
        text: '命令',
        onClick(record) {
          // onView(record);
        },
      },
      {
        text: '日志',
        onClick(record) {
          // onView(record);
        },
      },
      {
        text: '中断',
        onClick(record) {
          // onView(record);
        },
      },
    ],
  },
]);

const _request = async () => {
  return {
    total: 1,
    rows: [
      {
        total: 1,
      },
    ],
  };
};

const _items = computed<BoFormProps['columns']>(() => [
  {
    title: '策略名称',
    dataIndex: 'ruleName',
    valueType: 'input',
    formItemProps: {
      rules: [
        {
          required: true,
          message: '请输入策略名称',
          trigger: 'blur',
        },
      ],
    },
    fieldProps: {
      placeholder: '请输入策略名称',
    },
  },
]);

const onAdd = async () => {
  open({
    title: '新增',
    defaultValue: {},
    request: async (params: any) => {
      tableRef.value.refresh();
    },
  });
};

const onDelete = async (record = null) => {
  const ids = record ? record.id : selectKeys.value.join();
  Modal.confirm({
    title: '系统提示',
    content: `确定删除当前选中项数据吗?`,
    onOk: async () => {
      message.success('操作成功');
      tableRef.value.refresh();
    },
  });
};

const _listByEventId = async (params, eewId) => {
  // const res: any = await listByEventId({ eewId });
  // return res;
  return {
    total: 1,
    rows: [{ id: 1 }],
  };
};
</script>

<style scoped></style>

<route lang="json">
{
  "name": "ManualLog",
  "meta": {
    "title": "自动巡检日志"
  }
}
</route>
